<template>
  <scroll-view scroll-y="true" style="height: 100vh;">
    <!-- 顶部轮播图 -->
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
      <swiper-item v-for="(img, index) in swiperImgs" :key="index">
        <image :src="img" class="swiper-img" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <!-- 城市介绍 -->
    <view class="city-intro">
      <rich-text :nodes="cityIntro"></rich-text>
    </view>

    <!-- 探索进度 -->
    <view class="progress">
      <text>探索进度：{{ progress }}%</text>
      <progress :percent="progress" show-info="true"></progress>
    </view>

    <!-- 城市选择 -->
    <view class="city-picker">
      <picker mode="region" @change="onRegionChange">
        <view class="picker-view">
          当前选择：{{ selectedCity }}
        </view>
      </picker>
    </view>

    <!-- 媒体展示 -->
    <view class="media">
      <video :src="videoUrl" controls="true" poster="https://example.com/poster.jpg"></video>
    </view>

    <!-- 偏好设置 -->
    <view class="preference">
      <view class="travel-mode">
        <text>出行方式：</text>
        <radio-group @change="onTravelModeChange">
          <radio :value="item" :checked="travelMode === item" v-for="(item, index) in travelModes" :key="index">{{ item }}</radio>
        </radio-group>
      </view>
      <view class="show-spots">
        <text>显示推荐景点：</text>
        <switch :checked="showSpots" @change="onShowSpotsChange"></switch>
      </view>
      <view class="search-radius">
        <text>探索半径：{{ radius }}km</text>
        <slider :value="radius" @change="onRadiusChange" min="1" max="20"></slider>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图图片地址
      swiperImgs: [
        '/static/city1.png',
        '/static/city2.jpg',
        '/static/city3.jpg'
      ],
      // 城市介绍富文本内容
      cityIntro: '<p>泉州，宋元时期东方第一大港，海上丝绸之路起点。这里有着深厚的历史文化底蕴，清源山、开元寺等著名景点吸引着无数游客。同时，泉州的南音、木偶戏等特色文化也极具魅力。</p>',
      // 探索进度
      progress: 60,
      // 选择的城市
      selectedCity: '福建省-泉州市-丰泽区',
      // 视频地址
      videoUrl: '/static/city-video.mp4',
      // 出行方式选项
      travelModes: ['公交', '自驾', '步行'],
      // 当前选择的出行方式
      travelMode: '公交',
      // 是否显示推荐景点
      showSpots: true,
      // 探索半径
      radius: 12
    };
  },
  methods: {
    // 城市选择变化
    onRegionChange(e) {
      this.selectedCity = e.detail.value.join(' - ');
    },
    // 出行方式变化
    onTravelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    // 显示推荐景点开关变化
    onShowSpotsChange(e) {
      this.showSpots = e.detail.value;
    },
    // 探索半径变化
    onRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
};
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 400rpx;
}
.swiper-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.city-intro {
  padding: 20rpx;
}
.progress {
  padding: 20rpx;
}
.city-picker {
  padding: 20rpx;
}
.picker-view {
  border: 1px solid #eee;
  padding: 10rpx;
  border-radius: 5rpx;
}
.media {
  padding: 20rpx;
}
.media video {
  width: 100%;
  height: 400rpx;
}
.preference {
  padding: 20rpx;
}
.travel-mode,
.show-spots,
.search-radius {
  margin-bottom: 20rpx;
}
</style>